import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Card, Row, Col, Select, Switch, Space, Typography, Divider } from 'antd';
import { CompareOutlined, SyncOutlined } from '@ant-design/icons';
import LayoutPreview from './LayoutPreview';

const { Text } = Typography;
const { Option } = Select;

/**
 * 布局对比组件
 * 支持同时展示两种不同布局的效果
 */
const LayoutComparison = ({ 
  enabled, 
  onToggle, 
  leftLayout, 
  rightLayout, 
  onLeftLayoutChange, 
  onRightLayoutChange,
  availableLayouts
}) => {
  // 获取所有可用布局
  const getLayoutOptions = () => {
    return availableLayouts.map(layout => ({
      value: layout.key,
      label: layout.name
    }));
  };

  return (
    <Card 
      size="small" 
      title={
        <Space>
          <CompareOutlined />
          <span>布局对比</span>
          <Switch
            checked={enabled}
            onChange={onToggle}
            size="small"
          />
        </Space>
      }
    >
      {enabled ? (
        <Row gutter={16}>
          <Col span={12}>
            <div style={{ marginBottom: 8 }}>
              <Text style={{ fontSize: '12px' }}>左侧布局:</Text>
            </div>
            <Select
              value={leftLayout}
              onChange={onLeftLayoutChange}
              style={{ width: '100%' }}
              size="small"
              options={getLayoutOptions()}
            />
            <div style={{ marginTop: 8, height: 80 }}>
              <LayoutPreview layoutType={leftLayout} width={120} height={80} />
            </div>
          </Col>
          
          <Col span={12}>
            <div style={{ marginBottom: 8 }}>
              <Text style={{ fontSize: '12px' }}>右侧布局:</Text>
            </div>
            <Select
              value={rightLayout}
              onChange={onRightLayoutChange}
              style={{ width: '100%' }}
              size="small"
              options={getLayoutOptions()}
            />
            <div style={{ marginTop: 8, height: 80 }}>
              <LayoutPreview layoutType={rightLayout} width={120} height={80} />
            </div>
          </Col>
          
          <Col span={24} style={{ marginTop: 16 }}>
            <Space>
              <SyncOutlined />
              <Text type="secondary" style={{ fontSize: '12px' }}>
                对比模式下，同一组数据将使用不同布局算法进行可视化
              </Text>
            </Space>
          </Col>
        </Row>
      ) : (
        <div style={{ textAlign: 'center', padding: '16px 0' }}>
          <Text type="secondary">
            启用对比模式可同时查看两种布局效果
          </Text>
        </div>
      )}
    </Card>
  );
};

LayoutComparison.propTypes = {
  enabled: PropTypes.bool.isRequired,
  onToggle: PropTypes.func.isRequired,
  leftLayout: PropTypes.string.isRequired,
  rightLayout: PropTypes.string.isRequired,
  onLeftLayoutChange: PropTypes.func.isRequired,
  onRightLayoutChange: PropTypes.func.isRequired,
  availableLayouts: PropTypes.array.isRequired
};

LayoutComparison.defaultProps = {
  availableLayouts: []
};

export default LayoutComparison;